<template>
  <div>
    <h3 class="title">详情页</h3>
    <go-back></go-back>
    <to-search></to-search>
    <!-- <router-link to="/detail/2">联想小新</router-link>
    <router-link to="/detail/5">华为book</router-link> -->

    <hr />
    <button @click="addShop">加入购物车</button>
    <hr>
    <img :src="$pre + detail.img" alt="">

    <h3 v-if="detail.price">价格：{{ detail.price | filterPrice }}</h3>
    <div v-html="detail.description"></div>

    <hr />
    <h3 class="title">相关推荐</h3>
  </div>
</template>

<script>
import {reqAddShop , reqDetail} from "../../http/http"
export default {
  data() {
    return {
      detail: {},
    };
  },
  mounted() {
    reqDetail({
      id: this.$route.query.id,
    }).then((res) => {
      // console.log(res);
      this.detail = res.data.list[0];
    });
  },
  methods: {
    //加入购物车
    addShop() {
      reqAddShop({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        goodsid: this.$route.params.id,
        num: 1,
      }).then((res) => {
        if (res.data.code === 200) {
          //加入成功
          alert(res.data.msg);
        } 
      });
    },
  },

    // beforeCreate(){
    //     console.log("datail beforeCreate");
    // },
    beforeRouteUpdate(to, from, next) {
    reqDetail({
      id: to.params.id,
    }).then((res) => {
      this.detail = res.data.list[0];
    });
    next();
},
    //离开之前
  // beforeRouteLeave(to, from, next) {
  //   next();
  // },
}
</script>

<style scoped>
a {
  margin: 0.2rem;
  display: inline-block;
}
img {
  width: 100vw;
}
</style>